<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品卡片</title>
    <style>
      body {
        font: 12px/1 "Microsoft YaHei";
      }

      /* 去掉a标签默认文字下划线样式 */
      a {
        text-decoration: none;
      }

      h3,
      p {
        /* 干掉默认外边距 */
        margin: 0;
      }

      .goods_card {
        width: 150px;
        border: 1px solid #666;
        /* margin: 57px 37px 55px 38px; */
        padding: 10px;
      }

      .goods_card img {
        display: block;
      }

      .goods_card h3 {
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        color: #666;
        /* 行高 18px -文字size 12px =6px，文字垂直居中 上空3px，下空3px。图示5px-3px = 2px */
        margin-top: 2px;
        /* border: 1px solid #f00; */
      }

      .goods_price {
        color: #e1251b;
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
        /* 23 - 16 = 7,上3，下4,3+3=6，15-6=9 */
        margin-top: 9px;
        /* border: 1px solid #f00; */
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
      }

      .price_unit {
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        font-family: "Arial";
        margin-right: 2px;
      }

      .price_decimal {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
      }
    </style>
  </head>
  <body>
    <div class="goods_card">
      <a href="#">
        <img src="./images/img1.jpg" alt="商品图片" />
        <h3>iSeeJplus山茶花智能眼部按摩器护眼仪</h3>
        <p class="goods_price">
          <span class="price_unit">¥</span>
          679.
          <span class="price_decimal">00</span>
        </p>
      </a>
    </div>
  </body>
</html>
